<template>
  <div>
    <a-card :bordered="false">
      <f-search-form :more="true" @searchHandler="searchHandler">
        <f-search-form-item label="状态"  ref="syncStatusRef"  name="status" type="select" :data="statusData" @change="typeChange" />
        <f-search-form-item label="项目代码" name="projectCode" slot="advanced"/>
        <f-search-form-item label="项目名称" name="projectName"/>
        <f-search-form-item label="专业代码" name="majorCode" slot="advanced"/>
        <f-search-form-item label="专业名称" name="majorName" slot="advanced"/>
        <f-search-form-item label="工程包代码" name="packageNo" slot="advanced"/>
        <f-search-form-item label="工程包名称" name="packageName" slot="advanced"/>
        <f-search-form-item label="领料申请人" name="userName" slot="advanced"/>
        <f-search-form-item label="领料申请时间" name="createTime" slot="advanced"/>
        <f-search-form-item label="需求计划日期" name="receivedDate" slot="advanced"/>
        <f-search-form-item label="班组名称" name="supplierName" slot="advanced"/>
        <f-search-form-item label="预留编号" name="reserveNo" slot="advanced"/>
        <f-search-form-item label="预留项目编号" name="reserveRow" slot="advanced"/>
        <f-search-form-item label="SAP同步消息" name="msgtxFromSap" slot="advanced"/>
        <f-search-form-item label="领料申请流水号" name="recDecId" slot="advanced"/>
      </f-search-form>
      <f-table ref="table" rowKey="recDecId" :columns="columns" :exportBtn="true" :multiple="false" :operator="operator"
               :params="queryParam" :api="api.recDeliReqRecord"
               :scroll="{ x: 1300, y: 500 }"
               :showSetting="true"
               :showTotal="false"
               :tableColumns="columns">
        <span slot="createTime" slot-scope="createTime">
          {{ createTime | format2 }}
        </span>
        <span slot="receivedDate" slot-scope="receivedDate">
          {{ receivedDate | format2 }}
        </span>
        <!-- 状态标识 -->
        <a-tag v-if="status === '0'" color="geekblue" slot="status" slot-scope="status">
          {{ status | formatReqStatus }}
        </a-tag>
        <a-tag v-else-if="status === '1'" color="geekblue" slot="status" slot-scope="status">
          {{ status | formatReqStatus }}
        </a-tag>
        <a-tag v-else-if="status === '2'" color="green" slot="status" slot-scope="status">
          {{ status | formatReqStatus }}
        </a-tag>
      </f-table>
<!--      <brdr-drawer ref="drawer"></brdr-drawer>-->
    </a-card>
  </div>
</template>
<script>
  // import brdrDrawer from './recDeliReqRecord_drawer.vue'
  import api from './js/api'
  import { formatDate, formatDate2, formatReqStatus } from '../common/data'

  export default {
    name: 'TableList',
    components: {
      // brdrDrawer
    },
    data() {
      // const me = this
      //操作按钮
      const operator = []
      // operator.push({
      //   name: '添加',
      //   icon: 'plus',
      //   that: this,
      //   handler: function(table, that) {
      //       that.$refs.drawer.showDrawer()
      //   }
      // })
      return {
        api: Object.assign(api, this.api),
        statusData: [{ label: '出库单执行中', value: 0 }, { label: '出库单关闭', value: 1 }, { label: '出库驳回', value: 2 }],
        //列表初始化查询参数
        queryParam: {},
        // 表头
        columns: [
          {
            title: '状态',
            align: 'center',
            dataIndex: 'status',
            scopedSlots: { customRender: 'status' },
            width: 100,
            sorter: (a, b) => a.status.length - b.status.length
          },
          {
            title: '项目代码',
            align: 'center',
            dataIndex: 'projectCode',
            width: 120,
            sorter: (a, b) => a.projectCode.length - b.projectCode.length
          },
          {
            title: '项目名称',
            align: 'center',
            dataIndex: 'projectName',
            width: 180,
            sorter: (a, b) => a.projectName.length - b.projectName.length
          },
          {
            title: '专业代码',
            align: 'center',
            dataIndex: 'majorCode',
            width: 100,
            sorter: (a, b) => a.majorCode.length - b.majorCode.length
          },
          {
            title: '专业名称',
            align: 'center',
            dataIndex: 'majorName',
            width: 100,
            sorter: (a, b) => a.majorName.length - b.majorName.length
          },
          {
            title: '工程包代码',
            align: 'center',
            dataIndex: 'packageNo',
            width: 100,
            sorter: (a, b) => a.packageNo.length - b.packageNo.length
          },
          {
            title: '工程包名称',
            align: 'center',
            dataIndex: 'packageName',
            width: 100,
            sorter: (a, b) => a.packageName.length - b.packageName.length
          },
          {
            title: '领料申请人',
            align: 'center',
            dataIndex: 'createUserName',
            width: 120,
            sorter: (a, b) => a.userName.length - b.userName.length
          },
          {
            title: '领料申请时间',
            align: 'center',
            dataIndex: 'createTime',
            width: 120,
            scopedSlots: { customRender: 'createTime' },
            sorter: (a, b) => a.createTime.length - b.createTime.length
          },
          {
            title: '已采购数量',
            align: 'center',
            dataIndex: 'purchaseNum',
            width: 120,
            sorter: (a, b) => a.lgort.length - b.lgort.length
          },
          {
            title: '在途数量',
            align: 'center',
            dataIndex: 'onLineNum',
            width: 100,
            sorter: (a, b) => a.lgort.length - b.lgort.length
          },
          {
            title: '到货数量',
            align: 'center',
            dataIndex: 'receiveNum',
            width: 100,
            sorter: (a, b) => a.lgort.length - b.lgort.length
          },
          {
            title: '需求计划日期',
            align: 'center',
            dataIndex: 'receivedDate',
            scopedSlots: { customRender: 'receivedDate' },
            width: 100,
            sorter: (a, b) => a.lgort.length - b.lgort.length
          },
          {
            title: '班组名称',
            align: 'center',
            dataIndex: 'supplierNameForRecord',
            width: 120,
            sorter: (a, b) => a.lgort.length - b.lgort.length
          },
          {
            title: '本次领料量',
            align: 'center',
            dataIndex: 'recNumThis',
            width: 110,
            sorter: (a, b) => a.lgort.length - b.lgort.length
          },
          {
            title: '预留编号',
            align: 'center',
            dataIndex: 'reserveNo',
            width: 100,
            sorter: (a, b) => a.lgort.length - b.lgort.length
          },
          {
            title: '预留项目编号',
            align: 'center',
            dataIndex: 'reserveRow',
            width: 120,
            sorter: (a, b) => a.lgort.length - b.lgort.length
          },
          {
            title: 'SAP同步消息',
            align: 'center',
            dataIndex: 'msgtxFromSap',
            width: 120,
            sorter: (a, b) => a.lgort.length - b.lgort.length
          },
          {
            title: '领料申请流水号',
            align: 'center',
            dataIndex: 'recDecId',
            width: 130,
            sorter: (a, b) => a.recDecId.length - b.recDecId.length
          }
          // ,
          // {
          //   title: '操作',
          //   align: 'center',
          //   scopedSlots: { customRender: 'action' },
          //   width: 180
          // }
        ],
        operator: operator
      }
    },
    filters: {
      format(time) {
        return formatDate(time, 'yyyy-MM-dd')
      },
      format2(time) {
        return formatDate2(time, 'yyyy-MM-dd')
      },
      formatReqStatus(status) {
        return formatReqStatus(status)
      }
    },
    created() {
    },
    methods: {
      typeChange(val) {
        this.detailsParams.status = val
        // this.refs.syncStatusRef.initData(this.queryParam)
      }
    }
  }
</script>
